In my previous article, we have implemented a simple calculator app by using spinner component: Simple Calculator App in Android

In this article I am are going to implement a simple button which when clicked displays an alert pop-up having list of names like dropdown. When we select the name, this names will be set to the button’s text.

Pre-Requisites:

1. Ellipse SDK

2. Android SDK

3. ADT plugin

Install and configure the above utilities.

After then create a new Android project namely “ItemDialog”.

Add Widgets to our GUI:

Now, we need to add views in our view groups, i.e. add widgets to our GUI.

next we need a button which will be clicked to see the names.

For this, navigate to res/Layout/main.xml from package explorer in Eclipse. Open main.xml

Add following code into it:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
>
 
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/name"/>
 
</LinearLayout>

Now our app GUI will look something like this:

Adding String values for GUI widgets:   

Now we need to add string values for our GUI widgets

Now, open res/values/string.xml from package explorer and add following code in it:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <string name="app_name">ItemDialog</string>
    <string name="action_settings">Settings</string>
    <string name="name">Names</string>
 
</resources>

Adding behavior to the Button:

 To add behavior to our app we need to pop up an alert dialog consist of list of

names when the button is clicked, and the selected items names get set for the

button’s text

So we implement actions on button click by OnClickListener().

So our final code for mainActivity class will look like this: 

package com.example.itemdialog; 
import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.AlertDialog.Builder;
import android.content.Context;
import android.content.DialogInterface;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
 
public class MainActivity extends
Activity  {
      private Button button;
      Context context = this;
 
      @Override  protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            
            //button's reference   button= (Button)findViewById(R.id.button);
            
            //setting button's click and implementing the onClick method
            button.setOnClickListener(new OnClickListener() {
                  
                  @Override  public void onClick(View v) {
                        //List of items to be show in  alert Dialog are stored in array of strings/char sequences  final
               String[] items = {"AAAAAA","BBBBBBB", "CCCCCCC","DDDDDDDD"};
                        
                        AlertDialog.Builder builder = new AlertDialog.Builder(context);
                        
                        //set the title for alert dialog
                        builder.setTitle("Choose names: ");
                        
                        //set items to alert dialog. i.e. our array , which will be shown as list view in alert dialog
                        builder.setItems(items, new DialogInterface.OnClickListener() {
                              
                              @Override public void onClick(DialogInterface dialog, int item) {
                                    //setting the button text to the selected itenm from the list
                                    button.setText(items[item]);
                              }
                        });
                        
                        //Creating CANCEL button in alert dialog, to dismiss the dialog box when nothing is selected
                        builder .setCancelable(false)
                    .setNegativeButton("CANCEL",new DialogInterface.OnClickListener() {
                              
                              @Override  public void onClick(DialogInterface dialog, int id) {
                                    //When clicked on CANCEL button the dalog will be dismissed
                                    dialog.dismiss();
                              }
                        });
                        
                        //Creating alert dialog
                        AlertDialog alert =builder.create();
                        
                        //Showingalert dialog
                    alert.show();
                        
                  }
            }); 
                  
      }                 
            
      
      @Override  public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
      }
 
}

 Running the Application

Now run the project, emulator will start and click on the Show Popup button. It will show an model pop-up, consist of list of names

Now select an item from the list, and voila!! ,  the button name changed to the item selected.

 Next we move to menus in android and see how to implement  Pop- up Menus in Show Simple Pop-up Menu in Android

Thanks for reading this post.

Happy Coding!! J